<template>
  <div class="firstStep">
    <el-form
      :inline="true"
      :rules="rules"
      :model="formInline"
      ref="formInline"
      label-width="150px"
    >
      <el-form-item label="卡名称：" prop="name">
        <div>福利卡</div>
      </el-form-item>
      <el-form-item label="发卡主体：" prop="name">
        <div>海口高新区工委会</div>
      </el-form-item>
      <el-form-item label="卡封面：" prop="name">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="formInline.individuationCardCover"
            :src="formInline.individuationCardCover"
            class="cover_img"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span style="color: #1890ff">这里要告知上传封面图片建议尺寸</span>
      </el-form-item>
      <el-form-item label="卡名称：" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入卡名称"></el-input>
      </el-form-item>
      <el-form-item label="卡有效期：" prop="validityType">
        <el-select v-model="formInline.validityType" placeholder="请选择">
          <el-option
            v-for="item in dataOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卡金：" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入卡金">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="发行数量：" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入发行数量">
          <template slot="append">张</template>
        </el-input>
      </el-form-item>
      <el-form-item label="温馨提示：">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="formInline.name"
          show-word-limit
          :autosize="{ minRows: 4}"
        >
        </el-input>
      </el-form-item>
    </el-form>
    
  </div>
</template>
<script>
// components

import { adminDict} from "@/api/operateActive";

export default {
  //   name: "",
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      dataOptions: [],//有效期类型
      formInline:{
        validityType: '',
        name1: '',
      },
       rules: {
        name: [{ required: true, message: "请输入卡名称", trigger: "blur" }],
        merchantId: [
          { required: true, message: "请选择发卡门店", trigger: "blur" },
        ],
      },
  };
  },
  created() {
    this.getlinkagelist()
  },
  computed: {},
  methods: {
    getlinkagelist() {
      //获取有效期字典
      const params = {
        dictType: "asset_card_validity_type ",
      };
      adminDict(params).then((res) => {
        this.dataOptions = res.result[0].dictList;
      });
    },
    //卡封面
    handleAvatarSuccess(res, file) {
      
      this.formInline.individuationCardCover = res.result.url;
    },
    //上传照片前
    beforeAvatarUpload(file) {
      console.log(file);
      const format = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = format.some((item) => file.type === item);
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form--inline .el-form-item{
  display: block;
}

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 208px !important;
    height: 128px !important;
  }
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 208px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .el-input{
    width: 250px;
  }
  .el-textarea {
    width: 600px;
  }
</style>
